<template>
  <view class="container">
    <!-- 顶部用户信息 -->
    <view class="user-header">
      <view class="user-info">
        <view class="avatar-section">
          <image src="/static/icons/default-avatar.svg" class="user-avatar" mode="aspectFill" />
        </view>
        <view class="user-details" @click="handleUserClick">
          <text class="user-name">{{ displayUserName || '请登录' }}</text>
          <text class="user-level">{{ displayMemberLevel || '未知' }}</text>
        </view>
        <view class="points-info" @click="handlePointsClick">
          <text class="points-value">{{ displayPoints || '-' }}</text>
          <text class="points-label">可用积分</text>
        </view>
      </view>
    </view>

    <!-- 功能入口 -->
    <view class="function-grid">
      <view class="grid-title">
        <text class="title-text">快速功能</text>
      </view>
      <view class="grid-content">
        <view class="grid-item" @click="quickPrint">
          <text class="grid-icon">🖨️</text>
          <text class="grid-text">快速打印</text>
        </view>
        <view class="grid-item" @click="handleAdsClick">
          <text class="grid-icon">📺</text>
          <text class="grid-text">看广告赚积分</text>
        </view>
        <view class="grid-item" @click="handleInviteClick">
          <text class="grid-icon">👥</text>
          <text class="grid-text">邀请好友</text>
        </view>
        <view class="grid-item" @click="handleFilesClick">
          <text class="grid-icon">📁</text>
          <text class="grid-text">我的文件</text>
        </view>
        <view class="grid-item" @click="handleOrdersClick">
          <text class="grid-icon">📋</text>
          <text class="grid-text">{{ isAdmin ? '订单管理' : '我的订单' }}</text>
        </view>
        <!-- 普通用户功能 -->
        <view v-if="!isAdmin" class="grid-item" @click="handlePointsHistoryClick">
          <text class="grid-icon">�</text>
          <text class="grid-text">积分记录</text>
        </view>
        <view v-if="!isAdmin" class="grid-item" @click="handleMemberCenterClick">
          <text class="grid-icon">👤</text>
          <text class="grid-text">会员中心</text>
        </view>

        <!-- 管理员功能 -->
        <view v-if="isAdmin" class="grid-item" @click="handleScanClick">
          <text class="grid-icon">📱</text>
          <text class="grid-text">扫码核销</text>
        </view>
        <view v-if="isAdmin" class="grid-item" @click="handleAnalyticsClick">
          <text class="grid-icon">📊</text>
          <text class="grid-text">数据统计</text>
        </view>
        <view v-if="isAdmin" class="grid-item" @click="handleAdminClick">
          <text class="grid-icon">⚙️</text>
          <text class="grid-text">管理后台</text>
        </view>
        <view v-if="isAdmin" class="grid-item" @click="handlePermissionsClick">
          <text class="grid-icon">🔐</text>
          <text class="grid-text">权限管理</text>
        </view>
      </view>
    </view>

    <!-- 今日数据 -->
    <view class="today-stats">
      <view class="stats-title">
        <text class="title-text">今日数据</text>
      </view>
      <view class="stats-content">
        <view class="stat-item">
          <text class="stat-value">{{ displayTodayEarned }}</text>
          <text class="stat-label">今日获得积分</text>
        </view>
        <view class="stat-divider"></view>
        <view class="stat-item">
          <text class="stat-value">{{ displayAdWatchCount }}</text>
          <text class="stat-label">观看广告次数</text>
        </view>
        <view class="stat-divider"></view>
        <view class="stat-item">
          <text class="stat-value">{{ displayRemainingAdCount }}</text>
          <text class="stat-label">剩余观看次数</text>
        </view>
      </view>
    </view>

    <!-- 热门商品 -->
    <view class="hot-products">
      <view class="products-title">
        <text class="title-text">热门商品</text>
        <text class="more-text" @click="navigateTo('/pages/products/list')">查看更多 ></text>
      </view>
      <view class="products-content">
        <view class="products-list">
          <view v-for="(product, index) in productList" :key="index" class="product-item"
            @click="navigateTo('/pages/products/detail?id=' + product.id)">
            <view class="product-image">
              <image src="/static/icons/default-product.svg" mode="aspectFill" />
            </view>
            <view class="product-info">
              <text class="product-name">{{ product.name }}</text>
              <text class="product-price">{{ product.pointsPrice }}积分</text>
            </view>
          </view>
        </view>
      </view>
    </view>

  </view>
</template>

<script>
// 导入安全更新工具
import { safeUpdate, registerComponent, deferredUpdate } from '@/utils/textUpdateSafe.js'
import { simpleUpdate } from '@/utils/simpleUpdate.js'
import lifecycleManager from '@/utils/componentLifecycle.js'
import errorMonitoring from '@/utils/errorMonitoring.js'
import safeUpdateMixin from '@/mixins/safeUpdateMixin.js'

export default {
  name: 'IndexPage',
  mixins: [safeUpdateMixin],
  data() {
    return {
      isLoading: false,
      memberLevelText: '普通会员',
      availablePoints: 0,
      todayEarned: 0,
      adWatchCount: 0,
      remainingAdCount: 20,
      isDevelopment: process.env.NODE_ENV === 'development',
      productList: [],
      // 组件状态管理
      _componentId: null,
      _isComponentActive: true
    }
  },

  computed: {
    isAuthenticated() {
      return this.$store.state.auth?.isAuthenticated || false
    },
    userInfo() {
      return this.$store.state.auth?.userInfo || null
    },
    token() {
      return this.$store.state.auth?.token || ''
    },
    isLoggedIn() {
      return this.$store.getters['auth/isLoggedIn'] || false
    },
    nickname() {
      return this.userInfo?.nickname || ''
    },
    avatar() {
      return this.userInfo?.avatar || ''
    },
    points() {
      return this.$store.getters['auth/points'] || 0
    },

    displayUserName() {
      return this.nickname || '未登录'
    },

    displayMemberLevel() {
      return this.memberLevelText || '普通会员'
    },

    displayPoints() {
      return String(this.availablePoints || 0)
    },

    displayTodayEarned() {
      return String(this.todayEarned || 0)
    },

    displayAdWatchCount() {
      return String(this.adWatchCount || 0)
    },

    displayRemainingAdCount() {
      return String(this.remainingAdCount || 0)
    },

    // 用户角色显示
    userRole() {
      return (this.userInfo && this.userInfo.role) || '未设置'
    },

    // 检查是否为管理员
    isAdmin() {
      if (!this.userInfo) {
        return false
      }
      const role = this.userInfo.role
      const isAdminUser = role === 'admin'
      console.log('isAdmin 计算属性:', {
        userInfo: this.userInfo,
        role: role,
        isAdmin: isAdminUser
      })
      return isAdminUser || false
    }
  },

  onLoad() {
    console.log('首页 onLoad 开始')

    // 注册组件到生命周期管理器
    try {
      this._componentId = lifecycleManager.registerComponent(this)
      registerComponent(this)
      console.log('首页组件已注册:', this._componentId)
    } catch (error) {
      console.error('注册组件失败:', error)
      errorMonitoring.logTextUpdateError('COMPONENT_REGISTER_ERROR', error, {
        page: 'index',
        action: 'onLoad'
      })
    }

    // 延迟初始化，确保DOM准备完成
    this.$nextTick(() => {
      setTimeout(() => {
        if (this._isComponentActive) {
          this.initPage()
        }
      }, 100)
    })
  },

  onShow() {
    console.log('首页 onShow 开始')

    // 标记组件为活跃状态
    if (this._componentId) {
      lifecycleManager.markActive(this._componentId)
      this._isComponentActive = true
    }

    console.log('当前登录状态:', {
      isLoggedIn: this.isLoggedIn,
      isAuthenticated: this.isAuthenticated,
      hasToken: !!this.token,
      hasUserInfo: !!this.userInfo,
      userInfo: this.userInfo
    })

    this.checkAuthAndRefresh()
  },

  onHide() {
    // 标记组件为非活跃状态
    if (this._componentId) {
      lifecycleManager.markInactive(this._componentId)
      this._isComponentActive = false
    }
  },

  onUnload() {
    // 组件销毁时清理
    if (this._componentId) {
      lifecycleManager.markDestroyed(this._componentId)
      this._isComponentActive = false
    }
  },

  onPullDownRefresh() {
    this.refreshData().finally(() => {
      if (this._isComponentActive) {
        uni.stopPullDownRefresh()
      }
    })
  },

  methods: {
    // 调试用户信息
    debugUserInfo() {
      console.log('=== 用户信息调试 ===')
      console.log('Store state:', this.$store.state.auth)
      console.log('userInfo:', this.userInfo)
      console.log('userRole:', this.userRole)
      console.log('isAdmin:', this.isAdmin)
      console.log('token:', this.token)
      console.log('isLoggedIn:', this.isLoggedIn)

      // 显示弹窗
      const info = `
用户ID: ${this.userInfo?.id || '无'}
昵称: ${this.userInfo?.nickname || '无'}
角色: ${this.userInfo?.role || '无'}
是否管理员: ${this.isAdmin ? '是' : '否'}
Token: ${this.token ? '已设置' : '未设置'}

如果角色显示"无"，请点击"确定"清除缓存重新登录
      `.trim()

      uni.showModal({
        title: '用户信息调试',
        content: info,
        confirmText: '清除缓存',
        cancelText: '取消',
        success: (res) => {
          if (res.confirm) {
            // 清除认证信息
            this.$store.commit('auth/CLEAR_AUTH')
            uni.showToast({
              title: '缓存已清除，请重新登录',
              icon: 'success',
              duration: 2000
            })

            // 延迟刷新页面
            setTimeout(() => {
              uni.reLaunch({
                url: '/pages/index/index'
              })
            }, 2000)
          }
        }
      })
    },

    async initPage() {
      try {
        this.isLoading = true
        console.log('开始初始化页面')

        // 初始化认证状态
        try {
          console.log('开始初始化认证状态')
          await this.$store.dispatch('auth/initAuth')
          console.log('认证状态初始化完成:', {
            isLoggedIn: this.isLoggedIn,
            hasToken: !!this.token,
            hasUserInfo: !!this.userInfo
          })
        } catch (error) {
          console.error('初始化认证状态失败:', error)
        }

        await this.initPageData()
      } catch (error) {
        console.error('初始化页面失败:', error)
      } finally {
        this.isLoading = false
      }
    },

    async checkAuthAndRefresh() {
      if (this.isLoggedIn) {
        await this.refreshData()
      }
    },

    async initPageData() {
      if (!this.isLoggedIn) {
        return
      }

      try {
        await Promise.all([
          this.loadUserInfo(),
          this.loadPointsData(),
          this.loadHotProducts()
        ])
      } catch (error) {
        console.error('页面初始化失败:', error)
      }
    },

    async loadUserInfo() {
      try {
        if (!this.isLoggedIn || !this._isComponentActive) return

        // 使用 store 中的用户信息
        if (this.userInfo) {
          const updateData = {
            memberLevelText: this.userInfo.memberLevel || this.userInfo.member_level || '普通会员',
            availablePoints: this.points || 0
          }

          await this.safeUpdateWithRetry(updateData)
        }

        // 尝试从 API 获取最新用户信息
        try {
          const { getUserInfo } = require('@/api/user')
          const result = await getUserInfo()

          if (result && result.success && this._isComponentActive) {
            const apiUpdateData = {
              memberLevelText: result.data.memberLevel || result.data.member_level || '普通会员',
              availablePoints: result.data.points || 0
            }

            await this.safeUpdateWithRetry(apiUpdateData)

            // 更新store
            this.$store.commit('auth/SET_USER_INFO', result.data)
          }
        } catch (apiError) {
          console.warn('API获取用户信息失败:', apiError)
        }
      } catch (error) {
        console.error('加载用户信息失败:', error)
      }
    },

    async loadPointsData() {
      try {
        if (!this.isLoggedIn || !this._isComponentActive) return

        // 获取积分余额
        try {
          const { getPointsBalance } = require('@/api/points')
          const balanceResult = await getPointsBalance()

          if (balanceResult && balanceResult.success && this._isComponentActive) {
            await this.safeUpdateWithRetry({
              availablePoints: balanceResult.data.availablePoints || 0
            })
          }
        } catch (error) {
          console.warn('获取积分余额失败:', error)
        }

        // 获取积分统计
        try {
          const { getPointsStats } = require('@/api/points')
          const statsResult = await getPointsStats()

          if (statsResult && statsResult.success && this._isComponentActive) {
            const statsData = {
              todayEarned: statsResult.data.todayEarned || 0,
              adWatchCount: statsResult.data.adWatchCount || 0,
              remainingAdCount: Math.max(0, 20 - (statsResult.data.adWatchCount || 0))
            }

            await this.safeUpdateWithRetry(statsData)
          }
        } catch (error) {
          console.warn('获取积分统计失败:', error)
        }
      } catch (error) {
        console.error('加载积分数据失败:', error)
      }
    },

    async loadHotProducts() {
      try {
        if (!this._isComponentActive) return

        const { getHotProducts } = require('@/api/products')
        const result = await getHotProducts({ limit: 5 })

        if (result && result.success && result.data && result.data.length > 0 && this._isComponentActive) {
          const newProductList = result.data.map(product => ({
            id: product.id || 0,
            name: product.name || '商品名称',
            pointsPrice: product.points_price || product.pointsPrice || 0
          }))

          await this.safeUpdateWithRetry({
            productList: newProductList
          })
        }
      } catch (error) {
        console.warn('加载热门商品失败:', error)
      }
    },

    async refreshData() {
      try {
        if (this.isLoggedIn && this._isComponentActive) {
          // 显示加载状态
          await this.safeUpdateWithRetry({ isLoading: true })

          await this.initPageData()

          // 隐藏加载状态
          if (this._isComponentActive) {
            await this.safeUpdateWithRetry({ isLoading: false })
          }
        }
      } catch (error) {
        console.error('刷新数据失败:', error)

        // 确保隐藏加载状态
        if (this._isComponentActive) {
          await this.safeUpdateWithRetry({ isLoading: false })
        }

        this.showError('刷新失败')

        errorMonitoring.logTextUpdateError('REFRESH_DATA_ERROR', error, {
          page: 'index',
          action: 'refreshData'
        })
      }
    },

    handleUserClick() {
      if (this.isLoggedIn) {
        this.navigateTo('/pages/user/profile')
      } else {
        this.redirectToLogin()
      }
    },

    handlePointsClick() {
      if (this.isLoggedIn) {
        this.navigateTo('/pages/points/history')
      } else {
        this.redirectToLogin()
      }
    },

    handleAdsClick() {
      if (this.isLoggedIn) {
        this.navigateTo('/pages/ads/watch')
      } else {
        this.redirectToLogin()
      }
    },

    handleInviteClick() {
      if (this.isLoggedIn) {
        this.navigateTo('/pages/invite/index')
      } else {
        this.redirectToLogin()
      }
    },

    handleFilesClick() {
      if (this.isLoggedIn) {
        this.navigateTo('/pages/files/list')
      } else {
        this.redirectToLogin()
      }
    },

    handleOrdersClick() {
      if (this.isLoggedIn) {
        if (this.isAdmin) {
          // 管理员跳转到订单管理页面（显示所有订单）
          this.navigateTo('/pages/orders/index')
        } else {
          // 普通用户跳转到个人订单列表
          this.navigateTo('/pages/orders/list')
        }
      } else {
        this.redirectToLogin()
      }
    },

    handleAnalyticsClick() {
      if (this.isLoggedIn) {
        this.navigateTo('/pages/admin/analytics')
      } else {
        this.redirectToLogin()
      }
    },

    handleAdminClick() {
      if (this.isLoggedIn) {
        this.navigateTo('/pages/admin/dashboard')
      } else {
        this.redirectToLogin()
      }
    },

    handlePermissionsClick() {
      if (this.isLoggedIn) {
        this.navigateTo('/pages/admin/permissions')
      } else {
        this.redirectToLogin()
      }
    },

    handleScanClick() {
      if (this.isLoggedIn) {
        this.navigateTo('/pages/admin/scan')
      } else {
        this.redirectToLogin()
      }
    },

    handleDebugClick() {
      this.navigateTo('/pages/debug/auth')
    },

    handlePointsHistoryClick() {
      if (this.isLoggedIn) {
        this.navigateTo('/pages/points/history')
      } else {
        this.redirectToLogin()
      }
    },

    handleMemberCenterClick() {
      if (this.isLoggedIn) {
        this.navigateTo('/pages/user/profile')
      } else {
        this.redirectToLogin()
      }
    },

    quickPrint() {
      if (!this.isLoggedIn) {
        this.redirectToLogin()
        return
      }

      uni.showActionSheet({
        itemList: ['上传文件打印', '扫码打印', '历史文件打印'],
        success: (res) => {
          switch (res.tapIndex) {
            case 0:
              this.navigateTo('/pages/files/upload')
              break
            case 1:
              this.scanCode()
              break
            case 2:
              this.navigateTo('/pages/files/list')
              break
          }
        }
      })
    },

    scanCode() {
      // #ifdef MP-WEIXIN
      uni.scanCode({
        success: (res) => {
          console.log('扫码结果:', res)
          this.showSuccess('扫码成功')
        },
        fail: (error) => {
          console.error('扫码失败:', error)
          this.showError('扫码失败')
        }
      })
      // #endif

      // #ifdef H5
      this.showTip('H5环境暂不支持扫码功能')
      // #endif

      // #ifdef APP-PLUS
      this.showTip('APP环境扫码功能开发中')
      // #endif
    },

    redirectToLogin() {
      uni.showModal({
        title: '提示',
        content: '请先登录后再使用此功能',
        confirmText: '去登录',
        cancelText: '取消',
        success: (res) => {
          if (res.confirm) {
            uni.navigateTo({
              url: '/pages/auth/login'
            })
          }
        }
      })
    },

    navigateTo(url) {
      if (!url) {
        this.showError('页面路径错误')
        return
      }

      const tabbarPages = [
        '/pages/index/index',
        '/pages/points/earn',
        '/pages/products/list',
        '/pages/orders/list'
      ]

      const isTabbarPage = tabbarPages.some(page => url.startsWith(page))

      if (isTabbarPage) {
        uni.switchTab({
          url: url.split('?')[0],
          fail: (error) => {
            console.error('页面跳转失败:', error)
            this.showError('页面跳转失败')
          }
        })
      } else {
        uni.navigateTo({
          url,
          fail: (error) => {
            console.error('页面跳转失败:', error)
            this.showError('页面跳转失败')
          }
        })
      }
    },

    showSuccess(message) {
      uni.showToast({
        title: message,
        icon: 'success',
        duration: 2000
      })
    },

    showError(message) {
      uni.showToast({
        title: message,
        icon: 'none',
        duration: 2000
      })
    },

    showTip(message) {
      uni.showModal({
        title: '提示',
        content: message,
        showCancel: false
      })
    },

    // 安全更新方法，带重试机制
    async safeUpdateWithRetry(data, maxRetries = 3) {
      if (!this._isComponentActive) {
        console.warn('组件不活跃，跳过更新')
        return
      }

      for (let attempt = 1; attempt <= maxRetries; attempt++) {
        try {
          await simpleUpdate(this, data)
          return // 成功则退出
        } catch (error) {
          console.error(`更新失败 (尝试 ${attempt}/${maxRetries}):`, error)

          // 如果是视图相关错误，等待更长时间再重试
          if (error.message && (error.message.includes('32776') || error.message.includes('32774'))) {
            await new Promise(resolve => setTimeout(resolve, attempt * 200))
          }

          // 最后一次尝试失败，记录错误
          if (attempt === maxRetries) {
            errorMonitoring.logTextUpdateError('SAFE_UPDATE_RETRY_FAILED', error, {
              page: 'index',
              data: data,
              attempts: maxRetries
            })
          }
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  padding: 20rpx;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.user-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 16rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 8rpx 24rpx rgba(102, 126, 234, 0.3);
}

.user-info {
  display: flex;
  align-items: center;
  padding: 32rpx;
}

.avatar-section {
  margin-right: 24rpx;
}

.user-avatar {
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  border: 4rpx solid rgba(255, 255, 255, 0.3);
}

.user-details {
  flex: 1;
  cursor: pointer;
}

.user-name {
  font-size: 36rpx;
  font-weight: bold;
  color: white;
  margin-bottom: 8rpx;
  display: block;
}

.user-level {
  font-size: 26rpx;
  color: rgba(255, 255, 255, 0.8);
  background: rgba(255, 255, 255, 0.2);
  padding: 6rpx 16rpx;
  border-radius: 20rpx;
  display: inline-block;
}

.points-info {
  text-align: center;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 12rpx;
  padding: 20rpx;
  min-width: 140rpx;
  cursor: pointer;
  transition: all 0.3s ease;

  &:active {
    background: rgba(255, 255, 255, 0.25);
    transform: scale(0.95);
  }
}

.points-value {
  font-size: 40rpx;
  font-weight: bold;
  color: white;
  margin-bottom: 4rpx;
  display: block;
}

.points-label {
  font-size: 24rpx;
  color: rgba(255, 255, 255, 0.8);
  display: block;
}

.function-grid {
  background: white;
  border-radius: 16rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}

.grid-title {
  padding: 32rpx 32rpx 20rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

.title-text {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.grid-content {
  display: flex;
  flex-wrap: wrap;
  padding: 20rpx;
}

.debug-info {
  background: #fff3cd;
  border: 1px solid #ffeaa7;
  border-radius: 8rpx;
  padding: 20rpx;
  margin: 20rpx 0;

  text {
    display: block;
    font-size: 24rpx;
    color: #856404;
    margin-bottom: 8rpx;

    &:last-child {
      margin-bottom: 0;
    }
  }

  .debug-btn {
    margin-top: 16rpx;
    padding: 12rpx 24rpx;
    background: #007aff;
    color: white;
    border: none;
    border-radius: 6rpx;
    font-size: 24rpx;
  }
}

.grid-item {
  width: 25%;
  text-align: center;
  padding: 24rpx 12rpx;
  position: relative;
  cursor: pointer;
  transition: all 0.3s ease;
  box-sizing: border-box;

  &:active {
    background: #f8f9fa;
    border-radius: 12rpx;
    transform: scale(0.95);
  }
}

.grid-icon {
  font-size: 48rpx;
  margin-bottom: 12rpx;
  display: block;
}

.grid-text {
  font-size: 24rpx;
  color: #333;
  line-height: 1.2;
  display: block;
}

.today-stats {
  background: white;
  border-radius: 16rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}

.stats-title {
  padding: 32rpx 32rpx 20rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

.stats-content {
  display: flex;
  padding: 32rpx 20rpx;
}

.stat-item {
  flex: 1;
  text-align: center;
}

.stat-value {
  font-size: 40rpx;
  font-weight: bold;
  color: #667eea;
  margin-bottom: 8rpx;
  display: block;
}

.stat-label {
  font-size: 24rpx;
  color: #666;
  display: block;
}

.stat-divider {
  width: 1rpx;
  height: 60rpx;
  background-color: #f0f0f0;
  margin: 0 20rpx;
}

.hot-products {
  background: white;
  border-radius: 16rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}

.products-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 32rpx 32rpx 20rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

.more-text {
  font-size: 26rpx;
  color: #667eea;
  cursor: pointer;

  &:active {
    opacity: 0.7;
  }
}

.products-content {
  padding: 24rpx;
}

.products-list {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.product-item {
  width: 200rpx;
  margin-right: 20rpx;
  cursor: pointer;
  transition: all 0.3s ease;
  flex-shrink: 0;

  &:active {
    transform: scale(0.95);
  }

  &:last-child {
    margin-right: 0;
  }
}

.product-image {
  width: 200rpx;
  height: 150rpx;
  border-radius: 12rpx;
  overflow: hidden;
  background: #f8f9fa;

  image {
    width: 100%;
    height: 100%;
  }
}

.product-info {
  margin-top: 16rpx;
}

.product-name {
  font-size: 26rpx;
  color: #333;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-bottom: 8rpx;
  display: block;
}

.product-price {
  font-size: 28rpx;
  color: #667eea;
  font-weight: bold;
  display: block;
}
</style>